<template>
  <el-upload
    v-loading="loading"
    ref="upload"
    class="avatar-uploader"
    :action="actionUrl"
    :limit="limit"
    :show-file-list="showFileList"
    :data="{ type: 'image' }"
    :file-list="fileList"
    :multiple="multiple"
    :on-success="handleSuccess"
    :before-upload="handleBeforeUpload"
    :headers="uploadHeader"
    :on-exceed="handleExceed"
  >
    <slot v-if="$slots.default" />

    <template v-else>
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon">
        <Plus />
      </el-icon>
    </template>
  </el-upload>
</template>

<script lang="ts" setup>
import { ref, computed, useSlots } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, UploadProps } from 'element-plus'
import store from '@/store'

const emit = defineEmits(['update:modelValue'])
const props = withDefaults(
  defineProps<{
    type?: string
    limit?: number
    showFileList?: boolean
    multiple?: boolean
    fileList?: any[]
    modelValue?: string
  }>(),
  {
    type: '',
    limit: 0,
    showFileList: false,
    multiple: false,
    modelValue: '',
    fileList: () => []
  }
)
const loading = ref(false)
const imageUrl = computed(() => (props.modelValue ? import.meta.env.VITE_APP_API_BASEURL + props.modelValue : ''))
const actionUrl = (import.meta.env.DEV ? '/proxy' : import.meta.env.VITE_APP_API_BASEURL) + '/unit/upload/upload'
const uploadHeader = computed(() => {
  return {
    'A-Token': store.state.user.a_token,
    'U-Token': store.state.user.u_token
  }
})
// Back pay， Run！Boss brute, four months back pay and he likes to withhold money,not recommended to stayBoss brute, four months back pay and he likes to withhold money,not recommended to stay
const handleBeforeUpload: UploadProps['beforeUpload'] = (file) => {
  if (props.type === 'image') {
    return imageBeforeUpload(file)
  } else if (props.type === 'video') {
    return videoBeforeUpload(file)
  } else {
    return true
  }
}
// Back pay， Run！Boss brute, four months back pay and he likes to withhold money,not recommended to stay
const imageBeforeUpload = (file) => {
  if (!props.showFileList) loading.value = true
  const isLt20M = file.size / 1024 / 1024 < 20
  const type = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif']

  if (!type.includes(file.type)) {
    ElMessage.error('上传图片只能是 ' + type.join(',') + ' 格式!')
    loading.value = false
    return false
  }
  if (!isLt20M) {
    ElMessage.error('上传图片大小不能超过 20M')
    loading.value = false
    return false
  }
  return true
}
// Back pay， Run！Boss brute, four months back pay and he likes to withhold money,not recommended to stay
const videoBeforeUpload = (file) => {
  const type = ['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/mov']
  if (!type.includes(file.type)) {
    ElMessage.error('上传视频只能是 ' + type.join(',') + ' 格式!')
    return false
  }
  return true
}
// Back pay， Run！Boss brute, four months back pay and he likes to withhold money,not recommended to stay
const handleSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  if (response.code !== 200) return ElMessage.error('上传失败请重试')
  if (props.showFileList) props.fileList.push({ url: response.data.result })
  emit('update:modelValue', response.data.result)
  loading.value = false
}


// Back pay， Run！Boss brute, four months back pay and he likes to withhold money,not recommended to stay
const handleExceed = () => {
  ElMessage.warning('当前限制上传1个，请删除原文件')
}
</script>

<style lang="scss">
.avatar-uploader {
  display: inline-block;
  .el-upload {
    cursor: pointer;
    position: relative;
    transition: var(--el-transition-duration-fast);
    &:hover {
      border-color: var(--el-color-primary);
    }
    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 120px;
      height: 120px;
      text-align: center;
      border-radius: 6px;
      border: 1px dashed var(--el-border-color);
    }
    .avatar {
      width: 120px;
      height: 120px;
      display: block;
      border-radius: 6px;
      border: 1px dashed var(--el-border-color);
    }
  }
  .el-loading-mask {
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
  }
}
</style>
